{% extends "admin/change_list.html" %}
{% load i18n admin_urls static admin_list %}


{% block title %} 资产详情 | 元数据管理平台 {% endblock %}

{% block content_title %} 资产详情 {% endblock %}

{% block breadcrumbs %}
<ol class="breadcrumb">
    <li><a href="{% url 'admin:index' %}"><i class="fa fa-dashboard"></i> {% trans 'Home' %}</a></li>
    <li><a href="/admin/metadata/hivesearch">元数据管理</a></li>
    <li class="active">资产详情</li>
</ol>
{% endblock %}

{% block content %}
<div class="col-md-12">
    <div class="row">

        <div class="col-lg-4 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-aqua">
            <div class="inner">
              <h3>{{ storage.total_size }}</h3>

              <p>总空间大小</p>
            </div>
            <div class="icon">
              <i class="ion ion-document"></i>
            </div>
<!--            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>-->
          </div>
        </div>


        <div class="col-lg-4 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-green">
            <div class="inner">
              <h3>{{ storage.used_size }}</h3>

              <p>已使用空间大小</p>
            </div>
            <div class="icon">
              <i class="ion ion-document"></i>
            </div>
<!--            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>-->
          </div>
        </div>

        <div class="col-lg-4 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-yellow">
            <div class="inner">
              <h3>{{ storage.use_percent }}</h3>

              <p>使用百分比</p>
            </div>
            <div class="icon">
              <i class="ion ion-document"></i>
            </div>
<!--            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>-->
          </div>
        </div>


        <div class="col-lg-4 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-light-blue">
            <div class="inner">
              <h3>{{ incStorage.yesterday_add }}</h3>

              <p>昨日新增存储</p>
            </div>
            <div class="icon">
              <i class="ion ion-document"></i>
            </div>
<!--            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>-->
          </div>
        </div>


        <div class="col-lg-4 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-teal">
            <div class="inner">
              <h3>{{ incStorage.oneweek_add }}</h3>

              <p>近1周平均日增存储</p>
            </div>
            <div class="icon">
              <i class="ion ion-document"></i>
            </div>
<!--            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>-->
          </div>
        </div>

        <div class="col-lg-4 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-maroon">
            <div class="inner">
              <h3>{{ incStorage.onemonth_add }}</h3>

              <p>近1月平均日增存储</p>
            </div>
            <div class="icon">
              <i class="ion ion-document"></i>
            </div>
<!--            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>-->
          </div>
        </div>

        <div class="col-md-12">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">总空间使用情况</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
                <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
              </div>
            </div>
            <div class="box-body">
              <div class="chart">
                <canvas id="lineChart" style="height: 249px; width: 555px;" height="498" width="1110"></canvas>
              </div>
            </div>
            <!-- /.box-body -->
          </div>
        </div>

            <input type="hidden" id="lineDataX" value="{{ lineDataX }}" />
            <input type="hidden" id="lineDataY" value="{{ lineDataY }}" />

    </div>

</div>

{% endblock %}

{% block extrajs %}
<script type="text/javascript" src="{% static "js/chart.js" %}"></script>

<script>
const ctx = document.getElementById('lineChart').getContext('2d');

// eval('(' + dataFlow + ')')
var dataX = $("#lineDataX").val();
var dataY = $("#lineDataY").val();

console.log(dataX)
console.log(dataY)
var lineDataX = dataX.split(',').reverse()
var lineDataY = dataY.split(',').reverse()

const labels = lineDataX;
const dataStorageData = {
  labels: labels,
  datasets: [{
    label: '占用空间(单位T)',
    data: lineDataY,
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
    tension: 0.1
  }]
};

const myChart = new Chart(ctx, {
    type: 'line',
    data: dataStorageData,
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

</script>
{% endblock %}